// 定义消息组件
import {BaseElement, ChatStatus, baseStyle} from "./base.js";
/**
 * 参考资料
 */
class ReferenceItem extends BaseElement {
    static get observedAttributes() {
        return ['type', 'url', 'content', 'file-id', 'file-name'];
    }

    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.expanded = false;
        this.shadowRoot.adoptedStyleSheets = [baseStyle];
    }

    connectedCallback() {
        this.render();
        this.setupEventListeners();
    }

    setupEventListeners() {
        if ((this.getAttribute('type') === 'text' || this.getAttribute('type') === 'doc') ) {
            this.shadowRoot.addEventListener('click', (e) => {
                if (e.target.classList.contains('content')) {
                    this.expanded = !this.expanded;
                    console.debug(this.expanded)
                    this.render();
                }
            });
        }
    }

    getIcon() {
        const type = this.getAttribute('type') || 'text';
        switch(type) {
            case 'file':
                return `<svg t="1735371044791" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4324" width="18" height="18"><path d="M703.952018 0.406439v255.89839h255.87581L703.952018 0.406439z m-63.991533 0H192.132657a127.983065 127.983065 0 0 0-127.960485 127.960485v767.672591a127.983065 127.983065 0 0 0 127.960485 127.960485H831.844763a127.983065 127.983065 0 0 0 127.983065-127.960485V320.273782H639.960485V0.406439z m63.991533 831.664123h-383.858876v-63.968952h383.858876v63.968952z m0-191.906857h-383.858876v-63.968953h383.858876v63.968953z m0-255.920971v63.968953h-383.858876v-63.968953h383.858876z" fill="#9ca3af" p-id="4325"></path></svg>`;
            case 'website':
                return '<svg t="1735371293679" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13080" width="18" height="18"><path d="M743.619048 571.489524v10.24c0 14.140952 0 28.769524-2.925715 42.910476v7.801905a1239.527619 1239.527619 0 0 1-19.017143 138.971428 559.299048 559.299048 0 0 1 186.758096 73.630477 529.066667 529.066667 0 0 0 113.615238-273.554286zM739.718095 390.095238v8.289524c0 14.140952 0 28.769524 2.925715 42.910476v58.026667H1024a528.091429 528.091429 0 0 0-93.622857-290.133334 506.63619 506.63619 0 0 1-201.874286 88.259048c2.925714 31.207619 8.289524 62.415238 11.215238 92.647619zM284.769524 633.904762v-11.215238-38.034286a137.99619 137.99619 0 0 1 0-14.140952H2.925714a529.066667 529.066667 0 0 0 113.615238 273.554285 559.299048 559.299048 0 0 1 186.758096-73.630476 1335.100952 1335.100952 0 0 1-18.529524-136.533333zM280.380952 456.899048v-18.529524-49.249524c0-30.72 5.851429-60.952381 10.727619-90.697143a506.63619 506.63619 0 0 1-197.485714-88.259047 528.091429 528.091429 0 0 0-93.622857 292.571428h279.405714c0-15.11619 0-31.207619 0.975238-45.83619zM660.23619 311.100952a1021.074286 1021.074286 0 0 1-146.285714 10.24 1021.074286 1021.074286 0 0 1-146.285714-10.24 1325.348571 1325.348571 0 0 0-14.628572 189.196191h325.729524a1325.348571 1325.348571 0 0 0-18.529524-189.196191zM372.053333 759.222857a1044.48 1044.48 0 0 1 132.632381-8.777143h14.628572a1044.48 1044.48 0 0 1 132.632381 8.777143 1233.67619 1233.67619 0 0 0 21.942857-187.733333H350.110476a1233.67619 1233.67619 0 0 0 21.942857 187.733333zM619.27619 0a553.447619 553.447619 0 0 1 97.52381 228.205714 454.460952 454.460952 0 0 0 171.154286-73.142857A509.561905 509.561905 0 0 0 619.27619 0zM404.72381 0a509.561905 509.561905 0 0 0-267.215239 155.062857 454.460952 454.460952 0 0 0 171.154286 73.142857A559.786667 559.786667 0 0 1 404.72381 0zM646.582857 240.88381C614.887619 101.424762 561.737143 12.190476 512 12.190476S409.112381 101.424762 377.417143 240.88381a966.948571 966.948571 0 0 0 134.582857 9.264761 966.948571 966.948571 0 0 0 134.582857-9.264761zM319.878095 841.142857a524.190476 524.190476 0 0 0-154.087619 56.56381A509.074286 509.074286 0 0 0 404.72381 1024a506.63619 506.63619 0 0 1-84.845715-182.857143zM619.27619 1024a509.074286 509.074286 0 0 0 238.933334-126.293333 524.190476 524.190476 0 0 0-154.087619-56.56381A506.63619 506.63619 0 0 1 619.27619 1024zM390.095238 828.952381c32.182857 112.64 78.994286 182.369524 122.88 182.369524S602.697143 942.08 633.904762 828.952381a971.824762 971.824762 0 0 0-243.809524 0z" fill="#9ca3af" p-id="13081"></path></svg>';
            case 'doc':
                return '<svg t="1705040050000" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4324" width="18" height="18"><path d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326z m1.8 562H232V136h302v216c0 23.2 18.8 42 42 42h216v494z" fill="#9ca3af" p-id="4325"></path><path d="M504 618H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h184c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zM312 490v48c0 4.4 3.6 8 8 8h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8z" fill="#9ca3af" p-id="4326"></path></svg>';
            default:
                return '<svg t="1735371166745" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9686" width="18" height="18"><path d="M957.155556 707.470222h-339.399112c-37.376 0-67.697778-29.070222-67.697777-64.910222 0-36.124444 30.321778-65.137778 67.697777-65.137778h339.285334c37.432889 0 67.697778 29.013333 67.697778 65.137778 0.113778 35.84-30.208 64.910222-67.584 64.910222zM957.155556 967.793778H67.925333c-37.432889 0-67.925333-29.070222-67.925333-64.910222 0-36.124444 30.378667-65.194667 67.925333-65.194667h889.230223c37.376 0 67.697778 29.070222 67.697777 65.194667 0 35.84-30.321778 64.910222-67.697777 64.910222zM957.155556 447.317333h-203.662223c-37.319111 0-67.754667-29.070222-67.754666-64.910222 0-36.124444 30.435556-65.194667 67.754666-65.194667h203.662223c37.376 0 67.697778 29.070222 67.697777 65.194667 0 35.84-30.321778 64.910222-67.697777 64.910222zM67.925333 187.107556c-37.546667 0-67.925333-29.070222-67.925333-65.137778 0-35.84 30.378667-64.910222 67.925333-64.910222h542.72c37.432889 0 67.754667 29.070222 67.754667 64.910222 0 36.067556-30.321778 65.137778-67.754667 65.137778H406.926222v520.476444c0.113778 35.896889-30.151111 65.080889-67.697778 65.080889-37.376 0-67.925333-29.184-67.925333-65.194667V187.107556H67.925333z" fill="#9ca3af" p-id="9687"></path></svg>';
        }
    }

    render() {
        const type = this.getAttribute('type') || 'text';
        const url = this.getAttribute('url') || '';
        const content = this.getAttribute('content') || '';
        const fileId = this.getAttribute('file-id');
        const fileName = this.getAttribute('file-name');
        const maxLength = (type === 'text' || type == 'doc') ? 100 : 0;
        const shouldTruncate = (type === 'text' || type == 'doc') && content.length > maxLength && !this.expanded;
        const displayContent = shouldTruncate ? content.slice(0, maxLength) + '...' : content;


        this.shadowRoot.innerHTML = `
            <div class="ja reference-item">
                <div class="icon">${this.getIcon()}</div>
                <div class="content-wrapper">
                    ${(type === 'text') ? 
                        `<div class="content text-content ${this.expanded ? 'expanded' : ''}">${displayContent}</div>` :
                        type === 'doc' ?
                        `<div class="content text-content ${this.expanded ? 'expanded' : ''}">${displayContent}</div>
                         ${fileName ? `<div class="secondary-text clickable">${fileName}</div>` : ''}` :
                        type === 'website' ?
                        `<a href="${url}" target="_blank" class="content">${content}</a>
                         ${url ? `<div class="secondary-text">${url}</div>` : ''}` :
                        `<a href="${url}" target="_blank" class="content">${content}</a>`
                    }
                </div>
            </div>
        `;
    }
}

export default ReferenceItem;